﻿<!--Interval 自定义组件-->
<!--X-Tempalte 组件模板-->
<script type="text/x-template" id="interval-component-template">
    <div :class="{selected:isSelected,interval:true,full:full}" v-on:click="clickHandler">
        <div class="interval-name">
           <span>{{name}} </span>
        </div>
        <div class="interval-progress">
              <div class="progress-value" :style="'width:'+(current/maxCount*100)+'%'"></div>
              <div class="progress-text" >{{current}}/{{maxCount}}</div>
        </div>
    </div>
</script>
<script>
    var IntervalComponent={
        components:{
            
        },
        props:{ // 组件属性
            id:{
                type:String,
                default:null
            },
            name:String,
            suggestion:String,
            appointInfo:String,
            selectedId:{
                 type:String,
                 default:null
            },
            startTime:String,
            endTime:String,
            maxCount:Number,
            current:Number
        },
        template:'#interval-component-template', // 模板
        watch:{
            selectedId:function(value){
                const cvm = this;
                cvm.isSelected = (value && value===cvm.id);
            }
        },
        computed:{
            full:function(){
                const vm = this;
                return vm.current>=vm.maxCount;
            }
        },
        data:function(){
            return {
                isSelected:false
            }
        },
        methods:{
            clickHandler(){
                const cvm =this;
                cvm.$emit('click',{id:cvm.id,name:cvm.appointInfo,suggestionId:cvm.suggestion});
            }
        },
        create(){
            var cvm = this;
            cvm.isSelected=(cvm.selectedId && cvm.id===cvm.selectedId);
        }
    }
</script>
<style>
    .interval{
        border-radius:5px;
        border: 1px solid #DCDFE6;
        height:50px;
        width:18%;
        display:flex;
        flex-direction:column;
        align-items:center;
        padding-top:5px;
    }
        
        .interval .interval-name{
            width:100%;
            height:20px;
            flex:0;
            text-align:center;
            font-size:12px;
        }

        /*--进度条外框--*/
        .interval .interval-progress{
            flex:0;
            width:70%;
            height:15px;
            border: 1px solid #DCDFE6;
            position:relative;
            display:flex;
            flex-direction:row;
            justify-content:center;
            align-items:center;
            margin-top:4px;
        }
            /*--进度值--*/
            .interval .interval-progress .progress-value{
                height:100%;
                position:absolute;
                left:0;
                top:0;
                background-color: #909399;
            }

            /*--进度条文字--*/
            .interval .interval-progress .progress-text{
                font-size:12px;
            }


    /*--被选中--*/
    .selected {
        border: 1px solid #409EFF !important;
        color: #409EFF;
    }

        /*--选中后外框样式--*/
        .selected .interval-progress {
            border-color: #409EFF !important;
        }

        /*--进度条值--*/
            .selected .interval-progress .progress-value {
                background-color: #409EFF !important;
        }

        .isFull{
            border-color: #E6A23C;
            opacity: 0.6;
        }
</style>